<template>
	<div v-loading="data.mtloading">

		<el-table :data="data.langlist" :header-cell-style="{ 'text-align': 'center' }"
			:cell-style="{ 'text-align': 'center' }" class="w-full">

			<el-table-column prop="lang" :label="$t('machine.configs.langCode')">
				<template #default="scope">
					{{ scope.row.lang || '--' }}
				</template>
			</el-table-column>

			<el-table-column prop="langname" :label="$t('machine.types.country')">
				<template #default="scope">
					{{ scope.row.langname || '--' }}
				</template>
			</el-table-column>

			<el-table-column prop="gc_name" :label="$t('goods.types.name')">
				<template #default="scope">
					{{ scope.row.gc_name || '--' }}
				</template>
			</el-table-column>

			<el-table-column prop="desc" :label="$t('public.describe')">
				<template #default="scope">
					{{ scope.row.gc_name || '--' }}
				</template>
			</el-table-column>

			<el-table-column :label="$t('public.operate')">
				<template #default="scope">
					<el-button type="primary" size="small" @click="edit(scope.row)"><el-icon>
							<EditPen />
						</el-icon></el-button>
					<el-button v-if="scope.row.gcl_id != undefined" type="danger" size="small"
						@click="del(scope.row.gcl_id)"><el-icon>
							<Delete />
						</el-icon></el-button>
				</template>
			</el-table-column>

		</el-table>

		<el-dialog v-model="data.dialogVisible" :title="$t('goods.types.classLang')" center width="30%"
			style="margin-top: 80px;">
			<el-form v-if="data.dialogVisible" :model="data.objlang" :rules="data.rules"  :label-width="languages == 'en' ? '150px' : '100px'"
				ref="ruleFormRef">

				<el-form-item :label="$t('machine.configs.langCode') + ':'" prop="lang">
					<el-input v-model="data.objlang.lang" :placeholder="$t('message.pleaseEnter')" readonly />
				</el-form-item>

				<el-form-item :label="$t('machine.configs.langCode') + ':'" prop="langname">
					<el-input v-model="data.objlang.langname" :placeholder="$t('message.pleaseEnter')" readonly />
				</el-form-item>

				<el-form-item :label="$t('goods.types.name') + ':'" prop="gc_name">
					<el-input v-model="data.objlang.gc_name" :placeholder="$t('message.pleaseEnter')" />
				</el-form-item>

				<el-form-item :label="$t('goods.types.desc') + ':'" prop="desc">
					<el-input v-model="data.objlang.desc" :placeholder="$t('message.pleaseEnter')" />
				</el-form-item>

				<div class="w-full text-center">
					<div class="inline-block">

						<el-button type="primary" size="small" @click="submit(ruleFormRef)">
							{{ $t('public.save') }}
						</el-button>

						<el-button size="small" @click="data.dialogVisible = false">
							{{ $t('public.cancel') }}
						</el-button>

					</div>
				</div>

			</el-form>
		</el-dialog>

	</div>
</template>

<script lang="ts" setup>
import { useI18n } from 'vue-i18n'
const { t: $t } = useI18n()
import { getListcategorylang, addcatogorylang, updatecatogorylang, delcatogorylang } from '@/api/goods';
import {onMounted} from 'vue'
let languages = ref()
const { locale } = useI18n()
onMounted(() => {
	languages.value = locale.value
})
let ruleFormRef = ref<any>();
let props = defineProps({
	info: {
		// 选中的分类
		type: Object,
		default: {}
	},
	language: {
		type: Array,
		default: {}
	}
})

let data = reactive({
	mtloading: false, // 加载
	dialogVisible: false, // 弹窗
	rules: { // 表单验证
		g_name: { required: true, message: $t('message.pleaseEnter'), trigger: 'blur' },

	},
	objlang: {}, // 选中的分类
	langlist: [], // 列表信息

})

// 获取列表信息
let getlanglist = () => {
	data.mtloading = true

	data.langlist = []
	for (let item of props.language) {
		data.langlist.push({
			langname: item.name,
			langid: item.l_id,
			lang: item.lang,
			gc_id: props.info.gc_id,
			gc_name: '',
			desc: '',
		})
	}

	getListcategorylang().then(res => {
		data.mtloading = false
		if (res.state == 200) {
			for (let item of res.data) {
				for (let ime of data.langlist) {
					if (item.lang == ime.lang && ime.gc_id == item.gc_id) {
						ime.gcl_id = item.gcl_id
						ime.gc_name = item.gc_name
						ime.desc = item.desc
					}
				}
			}
		}
	}).catch(err => {
		data.mtloading = false
	})

}

//  添加、修改列表信息
let edit = (e) => {
	data.dialogVisible = true
	data.objlang = e
}

// 提交数据
let submit = (formEl: FormInstance | undefined) => {
	if (!formEl) return;
	formEl.validate((valid, fields) => {
		if (valid) {
			let info = {
				gc_id: data.objlang.gc_id,
				gc_name: data.objlang.gc_name,
				desc: data.objlang.desc,
				lang: data.objlang.lang
			}

			if (data.objlang.gcl_id == undefined || data.objlang.gcl_id == '') {
				// 添加语言
				addcatogorylang(info).then(res => {
					if (res.state == 200) {
						ElMessage({
							message: $t('message.addSuccess'),
							type: 'success'
						})
						data.dialogVisible = false
						getlanglist()
						return
					}
					ElMessage({
						message: $t('message.networkFailed'),
						type: 'error'
					})
				})
			} else {
				// 修改语言
				info.gcl_id = data.objlang.gcl_id
				updatecatogorylang(info).then(res => {
					if (res.state == 200) {
						ElMessage({
							message: $t('message.modifySuccess'),
							type: 'success'
						})
						data.dialogVisible = false
						getlanglist()
						return
					}
					ElMessage({
						message: $t('message.networkFailed'),
						type: 'error'
					})
				})
			}
		}
	})
}

// 删除列表信息
let del = (e) => {
	ElMessageBox.confirm($t('message.delDatas'))
		.then(res => {
			delcatogorylang({ gcl_id: e }).then(res => {
				if (res.state == 200) {
					ElMessage({
						message: $t('message.delSuccess'),
						type: 'success'
					})
					data.dialogVisible = false
					getlanglist()
					return
				}
				ElMessage({
					message: $t('message.networkFailed'),
					type: 'error'
				})
			})
		}).catch(err => {
			console.log('取消')
		})

}

getlanglist()

</script>